<template>
  <div>
    <TableHead @create="emit('create')" @refresh="list" :query="query" :table="table" />
    <a-card class="mt-4">
      <a-table
        v-model:selected-keys="table.keys"
        :row-key="table.rowKey"
        :row-selection="{
          selectedRowKeys: table.keys
        }"
        :loading="table.loading"
        :data="table.data"
        :bordered="false"
        :columns="translateColumns(columns.columns)"
        :pagination="{
          current: query.pageNum,
          total: query.total,
          pageSize: query.pageSize
        }"
        @page-size-change="pageSizeChange"
        @page-change="pageChange"
      >
        <template #operation="{ record }">
          <div class="flex gap-2 justify-center">
            <a-button size="mini" @click="edit(record[table.rowKey])">
              <IconEdit />
            </a-button>
            <a-button @click="del(record[table.rowKey])">
              <template #icon>
                <IconDelete />
              </template>
            </a-button>
          </div>
        </template>
        <template #resource="{ record }">
          <div class="grid grid-cols-4 items-center">
            <div v-for="item in record.resource.slice(0, 3)" :key="item.resId">
              <Resource
                :file="{
                  ...item,
                  uri: item.link
                }"
              />
            </div>
            <a-button v-if="record.resource.length > 3" class="w-fit" @click="displayVideo(record)">
              <IconMore />
            </a-button>
          </div>
        </template>
      </a-table>
    </a-card>

    <a-modal v-model:visible="displayModal" :footer="false">
      <div class="grid grid-cols-2 items-center" v-if="current">
        <div v-for="item in current.resource" :key="item.link">
          <Resource
            :file="{
              ...item,
              uri: item.link
            }"
          />
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { Cross, delCross, detailCross, listCross } from "@/api/service/lcd-device/cross";
import { IQuery, TableConfig } from "@/interface/IAxios";
import { Modal } from "@arco-design/web-vue";
import columns from "../components/column";
import TableHead from "./Head.vue";

const t = translate("公共模块");
const props = defineProps<{
  query: IQuery;
  table: TableConfig<Cross>;
}>();
const current = ref<Cross>();
const emit = defineEmits(["create", "edit", "refresh"]);
const displayModal = ref(false);
const list = async () => {
  props.table.loading = true;
  const { rows, total } = await listCross(props.query);
  props.table.data = rows;
  props.query.total = total;
  props.table.loading = false;
};

/* 编辑 */
const edit = async (id: string) => {
  const data = await detailCross(id);
  emit("edit", data.data);
};
/* 删除 */
const del = async (id: string) => {
  Modal.warning({
    title: t.value["警告"],
    content: t.value["是否执行操作"],
    async onOk() {
      // TODO: 接口调用
      await delCross(id);
      list();
    }
  });
};
onMounted(async () => {
  await list();
});
const displayVideo = (item: Cross) => {
  displayModal.value = true;
  current.value = item;
};
const pageChange = (page: number) => {
  props.query.pageNum = page;
  list();
};
const pageSizeChange = (pageSize: number) => {
  props.query.pageNum = pageSize;
  list();
};
const search = () => {
  props.query.pageNum = 1;
  list();
};
const create = () => {
  emit("create");
};
defineExpose({
  search
});
</script>

<style lang="scss" scoped></style>
